<!--
 @description 统计数量明细
 @fileName NumberDetail.vue
 @author zengqiongying
 @created 2022/01/17 16:15:00
-->
<template>
  <el-dialog
    ref="refDlg"
    v-el-drag-dialog
    :title=" `${detailTitle} 【${contentTitle}】`"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="90%"
    @close="closeDialog"
  >
    <!-- <div class="my-select-msgbox">
      <div><span class="color-green">{{ contentTitle }}</span></div>
    </div> -->
    <table-box
      ref="refTable"
      :border="false"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :other-raw="otherRaws"
      :selected-arry.sync="tableSelected"
      :table-height="400"
      :show-index="false"
      :show-selection="true"
      :table-sortable="false"
      :click-row-selection="true"
      :show-custom-collect="false"
      :show-custom-combine="false"
      :show-custom-setting="false"
      @btnOperate="btnOperate"
      @data-change="handleDataChange"
    />
    <export-files
      v-if="showExport"
      v-el-drag-dialog
      title="导出明细"
      :visible.sync="showExport"
      :config="exportConfig"
    />
  </el-dialog>
</template>

<script>
import { parseTime } from '@/utils'
export default {
  name: 'PushDetail',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'read'
    },
    contentId: {
      type: String,
      default: ''
    },
    contentTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showExport: false,
      tableSelected: [],
      otherFilters: [],
      otherRaws: {},
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/contentInfo/browseDetails/page/1`,
        // onlySearchBar: true,
        tabIndex: 20,
        buttonGroupCode: 'content_num_detail',
        sort: 'createTime', // this.type === 'collect' ? 'createTime' : this.type === 'read' ? 'readTime' : 'lastUpdateTime',
        order: 'desc',
        pageSize: 20,
        setting: [{
          prop: 'sourceCode', // sourceName
          label: '来源',
          minWidth: 120,
          type: 'select',
          propEnum: {
            domainCode: 'marketing',
            appCode: 'content-center',
            dictTypeCode: 'SOURCE'
          }
        },
        {
          prop: 'account',
          label: '用户名',
          minWidth: 120
        },
        {
          prop: 'userName',
          label: '姓名',
          minWidth: 120
        },
        {
          prop: 'createTime',
          type: 'date',
          label: this.type === 'collect' ? '收藏时间' : this.type === 'read' ? '浏览时间' : '操作时间',
          minWidth: 150,
          formatData: ({ createTime }) => {
            return parseTime(createTime)
          }
        }
        ],
        btnList: !this.isProduction ? [
          {
            buttonName: '导出明细',
            optCode: 'export',
            outerFlag: true
          }] : null
      },
      exportConfig: [
        {
          code: 'tweetPushDetail', // 导出编码，前端定义，同一个config中code不能重复
          name: `导出明细`, // 导出名称
          async: false, // 是否异步
          templateCode: '', // 模板code，若需要则由后端提供
          dataApi: `${process.env.VUE_APP_BASE_API}/api/v1/contentInfo/export/browseDetails/{type}`, // 导出数据的接口地址
          templateApi: ``, // 模板导出接口
          filtersRaw: [], // filter查询参数
          paramsRaw: {}, // params查询参数
          selectedRows: [], // 当前所选中的数据行
          queryField: 'id'// 指定行导出的字段名称
        }
      ]
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    detailTitle() {
      const obj = {
        'read': '浏览量明细',
        'like': '点赞量明细',
        'unlike': '点踩量明细',
        'collect': '收藏量明细'
      }
      return obj[this.type]
    }
  },

  created() {
    const type = ['', 'read', 'like', 'unlike', 'collect'].indexOf(this.type) // 明细种类 1 浏览明细、2点赞明细、3点踩明细、4收藏明细
    this.tableConfig.interfacePath = `${process.env.VUE_APP_BASE_API}/api/v1/contentInfo/browseDetails/page/${type}`
    this.otherFilters = [
      { id: 'contentId', property: 'contentId', value: this.contentId, operator: '=' }
    ]
    this.exportConfig[0].dataApi = `${process.env.VUE_APP_BASE_API}/api/v1/contentInfo/export/browseDetails/${type}`
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    btnOperate(code) {
      switch (code) {
        case 'export':
          this.handleExport()
          break
        default:
          break
      }
    },
    handleDataChange() {

    },
    // 导出
    handleExport() {
      let filtersRaw = this.otherFilters
      const allFilters = this.$refs.refTable.getAllFilters()
      if (allFilters.searchBarFilter) {
        filtersRaw = [...filtersRaw, ...allFilters.searchBarFilter]
      }
      if (allFilters.combineFilter) {
        filtersRaw = [...filtersRaw, ...allFilters.combineFilter]
      }
      const exportConfig = this.exportConfig[0]
      exportConfig.filtersRaw = filtersRaw
      exportConfig.paramsRaw = this.otherRaws
      exportConfig.name = `导出${this.detailTitle}`
      exportConfig.code = `content_${this.type}`
      // exportConfig.selectedRows = this.tableSelected || []
      /* if (this.type === 'read') {
        exportConfig.name = '导出阅读明细'
        exportConfig.code = 'content'
        // exportConfig.dataApi = ''
      } else {
        exportConfig.name = '导出送达用户明细'
        exportConfig.code = 'content'
        // exportConfig.dataApi = ''
      } */
      this.$set(this.exportConfig, 0, exportConfig)
      this.$nextTick(() => {
        this.showExport = true
      })
    }

  }
}

</script>
<style lang='scss' scoped>
.my-select-msgbox{
  display:flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .color-green{
    color: $--color-primary;
  }
  .btn-del{
    margin-left: 20px;
  }
}
</style>
